<template>
	<view class="page">
		<mx-navbar>
			<template #left>
				<view class="cu-bar bg-white search" :style="{'margin-right': `${$jn_width}px`}">
					<view class="search-form round" @click="$go('/pages/search/index')">
						<text class="cuIcon-search"></text>
						<text class="stxt">输入搜索的关键词</text>
					</view>
				</view>
			</template>
		</mx-navbar>

		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-' + list_curr_id"
			:style="[{ height: '100vh' }]" :scroll-with-animation="true"
			:enable-back-to-top="true">
			<block v-for="(item, index) in list" :key="index">
				<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
					<view class="padding">{{ item.name }}</view>
					<view class="cu-list menu-avatar no-padding">
						<view class="cu-cell " v-for="(items, sub_index) in item.sub" :key="sub_index" @click.stop="$go(`/pages/list/list?brand=${items.id}&name=${items.name}`)">
							<image class="himg cu-avatar round" v-if=" items.img" :src="$imgUrl + items.img"></image>
							<view class="content">
								<view class="text-black name">{{ items.ename }} {{ items.name }}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="indexBar" :style="[{ height: '100vh' }]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item, index) in list" :key="index" :id="index" @touchstart="getCur"
					@touchend="setCur"> {{ item.name }}</view>
			</view>
		</view>
		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{ list_cur }}
		</view>
	</view>
</template>


<script setup>
const {proxy} = getCurrentInstance();
const data = reactive({
	hidden: true,
	list_curr_id: '',
	list: [],
	list_cur: '',
})
const {
	hidden,
	list_curr_id,
	list,
	list_cur,
} = toRefs(data)

onLoad(() => {
	getData()
})

async function getData() {
	let res = await proxy.$api('Brand')
	if(res.code == 0) {
		data.list = res.data || []
		data.list_curr_id = data.list[0].name
	}
}
function getCur(e) {
	data.hidden = false;
	data.list_cur = data.list[e.target.id].name;
}
function setCur(e) {
	data.hidden = true;
	data.list_cur = data.list_cur
}
//滑动选择Item
function tMove(e) {
	let y = e.touches[0].clientY,
		offsettop = data.boxTop
		
	//判断选择区域,只有在选择区才会生效
	if (y > offsettop) {
		let num = parseInt((y - offsettop) / 20);
		data.list_cur = data.list[num].name
	};
}

//触发全部开始选择
function tStart() {
	data.hidden = false
}

//触发结束选择
function tEnd() {
	data.hidden = true;
	data.list_curr_id = data.list_cur
}



onShareAppMessage(()=>{})
onShareTimeline(()=>{})
</script>

<style lang="scss" scoped>
.search{
	width: 100%;
	// #ifdef MP
	margin-right: 180rpx;
	// #endif
}
.indexes {
	position: relative;
}

.indexBar {
	position: fixed;
	right: 0px;
	bottom: 0px;
	padding: 20rpx 0rpx 20rpx 60rpx;
	display: flex;
	align-items: center;
}

.indexBar .indexBar-box {
	width: 60rpx;
	height: auto;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
	border-radius: 10rpx;
}

.indexBar-item {
	width: 60rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #000;
}

movable-view.indexBar-item {
	width: 40rpx;
	height: 40rpx;
	z-index: 9;
	position: relative;
}

movable-view.indexBar-item::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 10rpx;
	height: 20rpx;
	width: 4rpx;
	background-color: #f37b1d;
}

.indexToast {
	position: fixed;
	top: 0;
	right: 80rpx;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	width: 100rpx;
	height: 100rpx;
	border-radius: 10rpx;
	margin: auto;
	color: #fff;
	line-height: 100rpx;
	text-align: center;
	font-size: 48rpx;
}

.cu-cell{
	height: 110rpx !important;
	padding-left: 40rpx;
	background-color: #FFF;
	border-bottom: 1px solid #efefef;
	display: flex;
	align-items: center;
}
.name{
	font-size: 24rpx !important;
}

.cu-avatar{
	margin-right: 30rpx;
}
</style>
